<template>
  <el-menu
      active-text-color="#ffd04b"
      background-color="#545c64"
      class="el-menu-vertical-demo"
      default-active="2"
      text-color="#fff"
      @select="selectCategory">
    <el-menu-item v-for="(category) in this.categories" :index="category.id" :key="category.id">
      <el-icon><document /></el-icon>
      <span>{{ category.name }}</span>
    </el-menu-item>
  </el-menu>
</template>

<script>
import {
  Document,
} from '@element-plus/icons-vue'
export default {
  name: "LibraryMenu",
  components: {
    Document,
  },
  data() {
    return {
      categories: []
    }
  },
  //加载后调用
  mounted() {
    this.loadCategory()
  },
  methods: {
    loadCategory() {
      let _this = this
      this.$axios.get("category/list")
      .then(success => {
        if (success.data.code === 200) {
          console.log(success.data.data)
          _this.categories = success.data.data
        } else {
          alert(success.data.message)
        }
      }).catch(fail => {
        console.log(fail);
      })
    },
    selectCategory(key) {
      this.$emit("selectCategory", key)
    }
  }

}
</script>

<style scoped>

</style>